* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
}


#miDiv {
    position: relative;
    height: 190px;
    width: 3200px;
}

#miVideo {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* ----------------- Inicio Banner ----------------- */

.banner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.encabezado-banner,
.texto-banner {
    display: none;
}

.div-miembros-celular h2 {
    color: #35A4DC;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.div-miembros-celular h2 span {
    font-weight: 700;
}

.div-miembros-celular p {
    color: #185C91;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 10px;
}



@media (min-width:768px) {
    .banner {
        height: 550px;
    }

    .miembros-celular {
        display: none;
    }

    #miDiv {
        height: 550px;
    }

    .encabezado-banner,
    .texto-banner {
        display: flex;
    }

    .contenedor-texto-banner {
        height: 680px;
        margin: 0 80px 0 100px;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .encabezado-banner h2 {
        color: #FFF;
        font-family: 'Poppins', sans-serif;
        font-size: 43px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .texto-banner p {
        color: #FFF;
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .encabezado-banner h2 span,
    .texto-banner p span {
        font-weight: 700;
    }

}

@media (min-width:992px) {
    .contenedor-texto-banner {
        width: 860px;
    }
}

@media(min-width:1300px) {

    .banner,
    #miDiv {
        height: 720px;
    }
}

/* ----------------- Fin Banner ----------------- */


/* ----------------- Inicio miembros celular  ----------------- */
.miembros p {
    color: #35A4DC;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 31px;
}

.miembros p span {
    font-size: 62px;
    font-weight: 600;
    line-height: 60px;
}

.marcas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    margin: 0 20px;
}

.marcas>div {
    text-align: center;
}

@media (min-width:576px) {
    .marcas {
        display: flex;
        flex-wrap: wrap;
        width: 1400px;
    }

    /* Estilos para los elementos dentro del contenedor */
    .marcas>* {
        flex: 1 0 12.5%;
        /* 1 fracción, no encoger, 12.5% de ancho (para 8 elementos en la primera fila) */
    }

    /* Ajustes para la segunda fila */
    .marcas> :nth-child(n + 9) {
        flex-basis: 14.28%;
    }

}

/* ----------------- Fin miembros celular  ----------------- */


/* ----------------- Inicio miembros mexico  ----------------- */

.contenedor-miembros-mexico {
    flex-direction: column;
    margin-top: 10px;
}

.div-miembros-mexico {
    display: none;
}

.estados-mexico-movil {
    margin: 10px 0 0 20px;
}

.nombre-estados {
    color: #185C91;
    font-family: 'Poppins', sans-serif;
    font-size: 29px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    max-width: 410px;
}

.mapa-mexico {
    margin: 0 20px;
}

.mapaDiv {
    width: 100%;
}

.estados-mexico-escritorio,
.ser-miembro-escritorio {
    display: none;
}

.ser-miembro-movil {
    margin: 20px 0 0 0;
}

.ser-miembro-movil p {
    color: #35A4DC;
    font-family: 'Poppins', sans-serif;
    font-size: 43px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: 55px;
}

.ser-miembro-movil span {
    font-size: 64px;
    font-weight: 700;
}

.texto-ser-miembro {
    color: #185C91;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 15px;
}

.tener-impacto,
.div-unirme {
    display: none;
}

.div-hacerme-miembro {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0 20px 0;
}

.btn-hacerme-miembro {
    width: 273px;
    height: 43px;
    flex-shrink: 0;
    border-radius: 186px;
    background: #35A8E0;
    border: none;
    color: #FFF;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}


.btn-hacerme-miembro a,
.btn-hacerme-miembro a:hover {
    color: white;
    text-decoration: none;
}

/* Agrega estilos de animación para la transición */
@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Aplica la animación al elemento con la clase 'nombre-estados' */
.nombre-estados {
    animation: slideIn 1s ease-in-out;
}

.imagen-hover {
    transition: background-image 0.5s ease-in-out;
    /* Ajusta la duración y el tipo de transición según tus preferencias */
}

@media (min-width:768px) {
    .div-miembros-mexico {
        display: block;
    }

    .miembros-anaps-mexico {
        color: #35A4DC;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 43px;
    }

    .miembros-anaps-mexico span {
        font-weight: 700;
    }

    .contenedor-miembros-mexico {
        flex-direction: column;
        margin-top: 50px;
    }

    .estados-mexico-escritorio {
        display: flex;
        max-width: 1200px;
        justify-content: end;
    }

    .estados-mexico-movil,
    .ser-miembro-movil {
        display: none;
    }

    .nombre-estados {
        position: relative;
        top: 30px;
        right: 100px;
        font-size: 28px;
        height: 0;
    }

    .mapa-mexico {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mapaDiv {
        width: 60%;
    }

    .seccion-formar-parte {
        width: 768px;
    }

    .ser-miembro-escritorio {
        display: block;
        width: 330px;
        margin-bottom: 20px;
    }

    .deseas-formar,
    .formar-parte {
        color: #35A4DC;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
    }

    .deseas-formar {
        font-weight: 400;
        font-size: 30px;
    }

    .formar-parte {
        font-size: 60px;
        font-weight: 700;
        line-height: 0px;
        text-align: end;
    }

    .div-texto-ser-miembro {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .texto-ser-miembro {
        width: 330px;
        font-size: 15px;
    }

    .tener-impacto {
        display: block;
        width: 280px;
        color: #35A8E0;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-size: 25px;
        font-style: normal;
        font-weight: 600;
        line-height: 110.25%;
    }

    .texto-ser-miembro,
    .tener-impacto {
        margin-top: 40px;
    }

    .div-tener-impacto {
        background-image: url(../../../public/images/miembros/fondo_tener_impacto.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 80px;
        height: 171px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .div-hacerme-miembro {
        display: none;
    }

    .div-unirme {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .btn-unirme {
        width: 273px;
        height: 43px;
        flex-shrink: 0;
        border-radius: 186px;
        background: #35A8E0;
        border: none;
        color: #FFF;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 110.25%;
    }

    .btn-unirme:hover {
        background: #1A729D;
    }

    .btn-unirme a {
        color: white;
        text-decoration: none;
    }

    .btn-unirme a:hover {
        color: white;
    }
}

@media(min-width:992px) {

    .nombre-estados {
        top: 35px;
        right: 200px;
        font-size: 28px;
        height: 0;
    }

    .seccion-formar-parte {
        width: 800px;
        margin: 0 100px;
    }

    .ser-miembro-escritorio {
        width: 360px;
    }

    .deseas-formar {
        font-size: 40px;
    }

    .formar-parte {
        font-size: 75px;
    }

    .texto-ser-miembro {
        width: 360px;
        font-size: 15px;
    }

    .tener-impacto {
        width: 350px;
        font-size: 30px;
    }
}


@media(min-width:1200px) {

    .nombre-estados {
        position: relative;
        top: 30px;
        right: 250px;
        font-size: 28px;
        height: 0;
    }

    .seccion-formar-parte {
        width: 1000px;
        margin: 0 50px;
    }

    .ser-miembro-escritorio {
        width: 480px;
    }

    .deseas-formar {
        font-size: 45px;
    }

    .formar-parte {
        font-size: 76px;
    }

    .texto-ser-miembro {
        width: 480px;
        font-size: 18px;
    }

    .tener-impacto {
        width: 400px;
        font-size: 35px;
    }


}


@media (min-width: 1300px) {
    .mapaDiv {
        width: 100%;
    }

    .nombre-estados {
        position: relative;
        top: 100px;
        right: 0px;
        font-size: 43px;
    }

    .seccion-formar-parte {
        width: 1200px;
        margin: 0 0;
    }

    .ser-miembro-escritorio {
        width: 540px;
    }

    .deseas-formar {
        font-size: 45px;
    }

    .formar-parte {
        font-size: 96px;
    }

    .texto-ser-miembro {
        width: 540px;
        font-size: 18px;
    }

    .tener-impacto {
        width: 425px;
        font-size: 40px;
    }

}


/* ----------------- Fin miembros mexico  ----------------- */


/* ------------------ Inicio de Mapa ------------------ */

.mapaDiv {
    margin: auto;
}

.mapaDiv path {
    stroke: white;
    stroke-width: 2px;
}

.color-mapa {
    fill: #98EDFD;
}

.cambiar-color {
    fill: #35A4DC;
}

.cambiar-color :hover {
    fill: #185C91;
    cursor:default;
}

/* ------------------ Fin de Mapa ------------------ */